// 定义方法

function renderScore() {
  // 请求所有的考试成绩
  axios({
    url: "/score/list",
  }).then((result) => {
    const { data } = result
    // 遍历对象
    let arr = []
    for (let key in data) {
      // key是学生的id
      arr.push(`<tr>
       <td>${key}</td> 
       <td>${data[key].name}</td>
       <td class="score" data-batch="1" data-id="${key}">${data[key].score[0]}</td>
       <td class="score" data-batch="2" data-id="${key}">${data[key].score[1]}</td>
       <td class="score" data-batch="3" data-id="${key}">${data[key].score[2]}</td>
       <td class="score" data-batch="4" data-id="${key}">${data[key].score[3]}</td>
       <td class="score" data-batch="5" data-id="${key}">${data[key].score[4]}</td>
      </tr>`)
    }
    // 将生成的数组渲染到html上
    $("tbody").html(arr) // 直接将数组渲染到页面上
  })
}
renderScore()
// 注册事件方法
function registerEvent() {
  $("tbody").on("dblclick", ".score", function () {
    // 注册了所有成绩单元格的双击事件
    const td = $(this) // 获取点击的单元格jquery对象
    let value = td.text() // 原来的值
    // alert(td.text())
    // 需要往里面塞input  这里需要判断一下 是否已经塞过input
    if (td.children().length > 0) return // 如果已经设置了input 直接返回
    td.text("")
    // 如果没有 继续
    let input = $("<input />") // 直接生成一个input对象
    input.val(value) // 写入值
    input.appendTo(td) // 将input添加到td上
    input.focus() // 聚焦
    input.on("blur", function () {
      // 离开焦点之后，input需要恢复原样
      td.html(value) // 直接将原来的td恢复成原来的模样
    })
    // 回车的时候 监听回车事件
    input.on("keyup", function (event) {
      // 监听回车事件
      if (event.keyCode === 13) {
        // 当按下enter键的时候 建码是13
        // 在此时就可以 将修改的数据存入到后端数据
        // 可以获取当前td的 batch(第几次)   id(学员id)
        const batch = td.data("batch")
        const stu_id = td.data("id")
        // 分数实际上就是 input里面存储的值
        const score = event.target.value
        // 发送请求之前 检查一下要更新的分数
        // 字符串和数字比较的时候 有一儿隐士转化
        if (isNaN(score) || parseInt(score) < 0 || parseInt(score) > 100) {
          // 不满足填写的分数要求
          toastr.warning("分数为0-100之间的数字")
          return
        }
        axios({
          url: "/score/entry",
          method: "post",
          data: {
            // 请求体参数
            batch,
            stu_id,
            score,
          },
        }).then((result) => {
          // 在此位置接收数据
          if (result.code === 0) {
            // 此时认为更新成功
            toastr.success(result.message)
            //如果真的成功了 更新当前的页面效果
            td.html(score) // 更新页面的内容
          } else {
            // 更新失败
            toastr.warning(result.message)
          }
        })
      }
    })
  })
}
registerEvent()
